@charset "utf-8";
$font-size:40px;
@function n($px) {
    @return $px/ $font-size * 1rem;
}   

* {
    margin: 0;
    padding: 0;
}

#load {
    width: n(750px);
    height: n(1206px);
    background: url(../img/26load.png) #4f4f4f;
//   position: relative;
     left: 0;
    top: 0;
//  height: 100%;
//  width: 100%;
// overflow: hidden;
    img {
        width: 100%;
    }
    .yun,
    .yun2 {
        position: absolute;
        top: n(110px);
        right: n(78px);
        width: n(32px);
        height: n(21px);
        background: url(../img/24load.png) no-repeat;
        background-size: 100%;
        animation: yun2 5s infinite 1s;
    }
    .yun2 {
        height: n(51px);
        width: n(69px);
        top: n(110px);
        right: n(126px);
        background: url(../img/27load.png) no-repeat;
        background-size: 100%;
        animation: yun2 5s infinite linear;
    }
    @keyframes yun2{
        0%{ transform: scale(1,1) translateY(n(60px));}
        100%{ transform: scale(0,0) translateY(n(-200px));}
    }
    .yan {
        position: absolute;
        top: n(110px);
        left: n(62px);
        width: n(659px);
        height: n(442px);
        background: url(../img/28load.png) no-repeat;
        background-size: 100%;
    }
    .person {
        position: absolute;
        z-index: 1;
        width: n(442px);
        height: n(585px);
        top: n(460px);
        right: n(110px);
        img {
            width: 100%;
        }
    }
    .yan2 {
        position: absolute;
        width: n(386px);
        height: n(271px);
        top: n(653px);
        left: n(46px);
        background: url(../img/22load.png) no-repeat;
        background-size: 100%;
    }
    .diqiu {
        position: absolute;
        right: 0;
        bottom: 0;
        width: n(595px);
        height: n(288px);
        background: url(../img/34load.png) no-repeat;
        background-size: 100%;
        img {
            width: 100%;
        }
    }
    .qizi {
        font-size: 0;
        position: absolute;
        width: n(113px);
        height: n(165px);
        right: n(20px);
        bottom: n(240px);
        background: url(../img/13load.png) no-repeat;
        background-size: 100%;
        .logo {
            position: relative;
            width: n(78px);
            height: n(70px);
            div:first-of-type {
                position: absolute;
                top: n(4px);
                left: n(34px);
                width: n(74px);
                height: n(49px);
                background: url(../img/15load.png) no-repeat center #1d82fe;
                background-size: 60%;
            }
            div:nth-of-type(2) {
                position: absolute;
                top: n(48px);
                left: n(34px);
                width: n(74px);
                height: n(23px);
                background: url(../img/17load.png) no-repeat center #1d82fe;
                background-size: 100%;
            }
        }
    }
    .roket {
        position: absolute;
        bottom: n(192px);
        left: n(238px);
        width: n(157px);
        height: n(116px);
        background: url(../img/11load.png) no-repeat;
        background-size: 100%;
    }
    .paizi {
        position: absolute;
        bottom: n(4px);
        left: n(214px);
        width: n(259px);
        height: n(198px);
        background: url(../img/19load.png) no-repeat;
        background-size: 100%;
    }
    .btn
    {
        position: absolute;
        bottom: n(23px);
        right: n(10px);
        width: n(134px);
        height: n(79px); 
        background: url(../img/2load.png) no-repeat;
        background-size: 100%;
    }
    .paizi_txt
    {
        position: absolute;
        bottom: n(60px);
        left: n(230px);
        width: n(220px);
        height: n(104px);
        background: url(../img/18load.png) no-repeat;
        background-size: 100%;
    }
}
#index
{
    display: none;
    width: n(750px);
    height: n(1206px);
    background: url(../img/indexbg.png) no-repeat;
    background-size: 100%;
//   position: relative;
     left: 0;
    top: 0;
//  height: 100%;
//  width: 100%;
   overflow: hidden;
    .logo{
        position: absolute;
        width: n(257px);
        height: n(75px);
        top: n(20px);
        right: n(50px);
        background: url(../img/logo.png) no-repeat;
        background-size: 100%;
    }
    .title
    {
        z-index: 1;
        position: absolute;
        width: n(720px);
        height: n(368px);
        top: n(100px);
        left: n(20px);
        background: url(../img/index2.png) no-repeat;
        background-size: 100%;
    }
    .yuefu
    {
        z-index: 1;
        position: absolute;
        width: n(660px);
        height: n(190px);
        top: n(380px);
        left: n(0px);
        background: url(../img/index4.png) no-repeat;
        background-size: 100%;
    }
    .zuiba
    {
        position: absolute;
        z-index: 0;
        width: n(657px);
        height: n(487px);
        top: n(365px);
        left: n(30px);
        background: url(../img/index6.png) no-repeat;
        background-size: 100%;
    }
    .kugou
    {
        position: absolute;
        z-index: 1;
        width: n(214px);
        height: n(171px);
        top: n(523px);
        left: n(280px);
        background: url(../img/index8.png) no-repeat;
        background-size: 100%;
    }
    .lperson
    {
        position: absolute;
        z-index: 1;
        width: n(360px);
        height: n(450px);
        bottom: n(147px);
        left: n(20px);
        background: url(../img/index1.png) no-repeat;
        background-size: 100%;
    }
    .rperson
    {
        position: absolute;
        z-index: 1;
        width: n(346px);
        height: n(504px);
        bottom: n(147px);
        right: n(20px);
        background: url(../img/index3.png) no-repeat;
        background-size: 100%;
    }
    .btn
    {
        position: absolute;
        z-index: 1;
        text-align: center;
        width: n(386px);
        height: n(125px);
        line-height: n(110px);
        bottom: n(30px);
        font-size: n(50px);
        right: n(200px);
        background: url(../img/index7.png) no-repeat;
        background-size: 100%;
    }
    
}

.enter{
    animation: enter 1s cubic-bezier(.33,.6,.6,1.34);
    
}
@keyframes enter{
    0%{ transform: translateY(n(-300px));}
    100%{ transform: translateY(0);}
}
.delay_200{
    animation-delay: 200ms;
}
.delay_400{
    animation-delay: 400ms;
}
.delay_600{
    animation-delay: 600ms;
}